<!-- 父组件与子组件之间的数据传递 -->

<!-- 引入vue框架 --> 
<script src="vue.js"></script> 

 <!-- 界面显示 --> 
<div id="app">
<prpet></prpet>
</div> 

 <!-- 自定义子组件模板 --> 
 <template id="chaild1"> 
     <div> 

          <!-- 点击事件调用send方法 --> 
          <button @click="send">发送</button> 
          <!-- 文本框进行双向绑定msg --> 
          <input type="text" v-model="msg" /> 
    </div> 
 </template> 

 <!-- 脚本定义 --> 
 <script> 
    // 注册父组件 
    Vue.component('prpet',{ 
        // 父组件变量msg 
        data(){ 
            return { 
               msg : ''
            }

        },
        // 引入子组件，组件当中 childfn 名字要给出父组件的方法名 prpetfn 
        template: '<div><child @childfn="prpetfn"></child>'+ 
        "获取子组件的信息为:{{msg}}</div>", 
        // 定义父组件的事件 
         methods:{ 
             prpetfn(value){ 
                this.msg=value; 
            } 
        }
    });

     // 注册子组件 
     Vue.component('child',{ 
           // 子组件样式 
           template: '#chaild1', 
           // 子组件的定义的变量 
           data(){ 
              return { 
                  msg: ''
              } 
         }, 
        // 子组件的方法 
        methods: { 
           send(){ 
           // 利用$emit 将 父组件 childfn 事件进行连接，并且将msg传递给此函数 
           this.$emit('childfn',this.msg) 
           }
        }
    }) 

    var vue=new Vue({ 
        el:"#app", 
    }) 
 </script> 

 <!-- 当前界面样式 --> 
 <style> 

 </style>